<script setup lang="ts">
import Card from 'primevue/card';
import DataView from 'primevue/dataview';
import Image from 'primevue/image';
import Avatar from 'primevue/avatar';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'
import {onMounted, ref} from "vue";
import Dialog from "primevue/dialog";
// import {getMyClassListApi, joinClassApi} from "@/api/user/class";
const visible = ref(false)
const classList = ref([])
const joinClassParam = ref({
  id:'',
  password:''
})
// onMounted(() => {
//   requestClassList()
// })
// const requestClassList = () => {
//   getMyClassListApi().then(res => {
//     classList.value= res.data
//     console.log(res)
//   }).catch(err => {
//     console.log(err)
//   })
// }
// const  onSubmit =()=>{
//   console.log(joinClassParam.value.password)
//   let param = {classId:joinClassParam.value.id,password:joinClassParam.value.password}
//   joinClassApi(param).then(res => {
//     requestClassList()
//     visible.value = false
//   }).catch(err => {
//   })
// }
</script>

<template>
  <div class="w-full bg-blue-400 h-20"></div>
  <div class="flex justify-center bg-gray-100">
    <div class="w-2/3">
      <Card>
        <template #title>
          <span>我的班级</span>
          <Button label="加入班级" icon="pi pi-plus" iconPos="right" @click="visible=true" />
        </template>
        <template #content>
<!--          <DataView :value="products">-->
<!--            <template #list="slotProps">-->
<!--              <div class="grid grid-nogutter">-->
<!--                <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">-->
<!--                  <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3"-->
<!--                       :class="{ 'border-top-1 surface-border': index !== 0 }">-->
<!--                    <div class="w-1/5 relative">-->
<!--                      <img class="block xl:block mx-auto border-round w-full" :src="item.image" :alt="item.name"/>-->
<!--                      &lt;!&ndash;                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>&ndash;&gt;-->
<!--                    </div>-->
<!--                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">-->
<!--                      <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">-->
<!--                        <div>-->
<!--                          <span class="font-medium text-secondary text-sm">{{ item.category }}</span>-->
<!--                          <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>-->
<!--                        </div>-->
<!--                        <div class="surface-100 p-1" style="border-radius: 30px">-->
<!--                          <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">-->
<!--                            <span class="text-900 font-medium text-sm">{{ item.rating }}</span>-->
<!--                            <i class="pi pi-star-fill text-yellow-500"></i>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <div class="flex flex-column md:align-items-end gap-6">-->
<!--                        <span class="text-xl font-semibold text-900">${{ item.price }}</span>-->
<!--                        <div class="flex flex-row-reverse md:flex-row gap-2">-->
<!--                          <Button icon="pi pi-heart" outlined></Button>-->
<!--                          <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </DataView>-->
          <DataView :value="classList">
            <template #list="slotProps">
              <div class="flex flex-wrap">
                <div v-for="(item, index) in slotProps.items" :key="index" class="w-full p-3">
                  <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                    <img class="w-9/12 sm:w-[16rem] xl:w-[10rem] shadow-md block xl:block mx-auto rounded" :src=item.image :alt="item.name" />
<!--                    <Image :src=item.image alt="Image" width="100" />-->
<!--                      <Avatar :image=item.image class="mr-2" size="xlarge" shape="circle" />-->
                    <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
                      <div class="flex flex-col items-center sm:items-start gap-3">
                        <div class="text-2xl font-bold text-surface-900 dark:text-surface-0">{{ item.className }}</div>
<!--                        <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>-->
                        <div class="flex items-center gap-3">
                                <span class="flex items-center gap-2">
<!--                                    <i class="pi pi-tag"></i>-->
                                    <span class="font-semibold">{{ item.classDesc }}</span>
                                </span>
<!--                          <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>-->
                        </div>
                      </div>
                      <div class="flex sm:flex-col items-center sm:items-end gap-3 sm:gap-2">
<!--                        <span class="text-2xl font-semibold">${{ item.price }}</span>-->
                        <Button label="进入" rounded ></Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </DataView>
        </template>
      </Card>

    </div>
  </div>
  <Dialog v-model:visible="visible" modal header="加入班级" :style="{ width: '25rem' }">
    <div class="flex align-items-center gap-3 mb-3">
      <label class="font-semibold w-6rem">班级id</label>
      <InputText v-model="joinClassParam.id" class="flex-auto" autocomplete="off"/>
    </div>
    <div class="flex align-items-center gap-3 mb-3">
      <label class="font-semibold w-6rem">进班密码</label>
      <InputText v-model="joinClassParam.password" class="flex-auto" autocomplete="off"/>
    </div>
    <div class="flex justify-content-end gap-2">
      <Button type="button" label="取消" severity="secondary" @click="visible = false"></Button>
      <Button type="button" label="保存" @click="onSubmit"></Button>
    </div>
  </Dialog>
</template>

<style scoped>

</style>@/api/class